<template>
	<view>
		<view class="container" id="container">
			<view v-for="(itemq,indexq) in jsPlumbList" :key="indexq" :id="itemq.id">
				<view class="list" v-for="(itemw,indexw) in itemq.array" :key="indexw" :id="itemw.id" name="cell">
					<text>{{itemw.name}}</text>
				</view>
			</view>
		</view>
		
		<view class="btn-group">
			<view class="btn1" @tap="detach">
				<text>重置</text>
			</view>
			<view class="btn2" @tap="submit">
				<text>提交</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				jsPlumb: null,
				jsPlumbList: [{
						id: 'left',
						array: [{
								name: '香蕉',
								id: 'a1'
							},
							{
								name: '大象',
								id: 'a2'
							},
							{
								name: '铅笔',
								id: 'a3'
							}
						],
					},
					{
						id: 'right',
						array: [{
								name: '动物',
								id: 'b1'
							},
							{
								name: '文具',
								id: 'b2'
							},
							{
								name: '水果',
								id: 'b3'
							}
						]
					}
				],
				connlist: [{
					sourceNodeId:'a1',
					targetNodeId:'b1'
				}]
				// connlist: []
			};
		},
		onLoad() {
			this.jsPlumb = this.$jsPlumb.getInstance({
				Container: 'container',
				EndpointStyle: {
					radius: 0.11,
					fill: '#fff'
				},
				PaintStyle: {
					stroke: '#F00',
					strokeWidth: 1
				},
				HoverPaintStyle: {
					stroke: '#1E90FF'
				},
				EndpointHoverStyle: {
					fill: '#F00',
					radius: 6
				},
				Connector: ['Straight', {
					gap: 1
				}],
				DrapOptions: {
					cursor: 'crosshair',
					zIndex: 2000
				},
			})
		},
		onReady() {
			const ins = this.jsPlumb
			ins.getAllConnections()
			ins.batch(() => {
				this.initAll()
				this.connectionAll()
				this.setRule()
			})
			this.switchContainer(true, true, false)
		},
		methods: {
			initAll() {
				const rl2 = this.jsPlumbList
				rl2.find((item, index) => {
					item.array.find((itemq, indexq) => {
						this.init(itemq.id,index)
					})
				})
			},
			init(id,index) {
				const ins = this.jsPlumb
				console.log(id);
				const elem = document.getElementById(id)
				if(index == 0){
					ins.makeSource(elem, {
						/* anchor: ['Perimeter', {
							anchorCount: 200,
							shape: 'Rectangle'
						}], */
						anchor: ["Right"], // 设置端点位置
						allowLoopback: false,
						maxConnections: 1
					})
					// ins.makeTarget(elem, {
					// 	/* anchor: ['Perimeter', {
					// 		anchorCount: 200,
					// 		shape: 'Rectangle'
					// 	}], */
					// 	anchor: ["Right"], // 设置端点位置
					// 	allowLoopback: false,
					// 	maxConnections: 1
					// })
				}else{
					// ins.makeSource(elem, {
					// 	/* anchor: ['Perimeter', {
					// 		anchorCount: 200,
					// 		shape: 'Rectangle'
					// 	}], */
					// 	anchor: ["Left"], // 设置端点位置
					// 	allowLoopback: false,
					// 	maxConnections: 1
					// })
					ins.makeTarget(elem, {
						/* anchor: ['Perimeter', {
							anchorCount: 200,
							shape: 'Rectangle'
						}], */
						anchor: ["Left"], // 设置端点位置
						allowLoopback: false,
						maxConnections: 1
					})
				}
			},
			connectionAll() {
				const ins = this.jsPlumb
				ins.ready(() => {
					this.connlist.find((item, index) => {
						const connection = ins.connect({
							source: item.sourceNodeId,
							target: item.targetNodeId,
							/* overlays: [
								['Arrow', {
									width: 12,
									length: 10,
									location: 1,
									PaintStyle: {
										stroke: '#496def',
										fill: '#496def'
									}
								}]
							] */
						})
						connection.setPaintStyle({
							stroke: '#496def',
							strokeWidth: 2
						})
					})
				})
			},

			switchContainer(target, source, draggable) {
				const elem = document.getElementsByName('cell')
				const ins = this.jsPlumb
				ins.setSourceEnabled(elem, source)
				ins.setTargetEnabled(elem, target)
				ins.setDraggable(elem, draggable)
			},

			setRule() {
				const ins = this.jsPlumb
				ins.bind("beforeDrop", function(connInfo) {
					console.log(connInfo.sourceId.substring(0,1),connInfo.targetId.substring(0,1));
					if(connInfo.sourceId.substring(0,1) == connInfo.targetId.substring(0,1)){
						return false
					}else{
						return true
					}
				});
			},

			detach() {
				const ins = this.jsPlumb
				let newRelationship = ''
				ins.getAllConnections().find(function(el) {
					newRelationship += ` ${el.sourceId}连接了${el.targetId}`;
				})
				ins.deleteEveryConnection()
			},
			
			submit(){
				const ins = this.jsPlumb
				ins.getAllConnections().find(function(el) {
					console.log(el.sourceId,el.targetId);
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.container {
		width: 622rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		.list {
			width: 188rpx;
			padding: 22rpx 32rpx;
			text-align: center;
			background: #F7F7F9;
			border-radius: 44rpx;
			margin-top: 60rpx;
		}
	}
	.btn-group{
		width: 710rpx;
		height: 88rpx;
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		.btn1{
			width: 345rpx;
			height: 88rpx;
			border-radius: 16rpx;
			background-color: #F8F8F8;
			text-align: center;
			line-height: 88rpx;
			font-size: 30rpx;
		}
		.btn2{
			width: 345rpx;
			height: 88rpx;
			border-radius: 16rpx;
			background-color: #FA3534;
			text-align: center;
			line-height: 88rpx;
			color: #FFFFFF;
			font-size: 30rpx;
		}
	}
</style>
